<template>
	<view class="mainpadding">
		<u-popup :show="lhshow" @close="lhclose" mode="center" :round="10">
			<view class="" style="padding: 50rpx 40rpx; ">
				<view class="bigtext fonweight xiaohei" style="width: 550rpx;">
					是否清空全部历史搜索记录？
				</view>
				<view class=" flexright" style="margin-top: 100rpx;">
					<view class="xiaohui sanshier margin_right3" @click="lhclose">取消</view>
					<view class="xiaolan sanshier fonweight" @click="empty();lhclose()">确定</view>
				</view>
			</view>
		</u-popup>
		<u-navbar :placeholder="true">
			<view class="flexleft ssousuobox1" slot="left">
				<view class="margin_right2">
					<u-icon name="search" color="#999999" size="28"></u-icon>
				</view>
				<input type="text" placeholder="输入内容搜索" v-model="keywords" confirm-type="search" @confirm="tzssjg()">
			</view>
			<view class="ershiba xiaohei" slot="right" @click="tzsgjg" v-show="keywords==''">取消</view>
			<view class="ershiba xiaohei" slot="right" @click="tzssjg" v-show="keywords!=''">搜索</view>
		</u-navbar>
		<!-- <template v-if="keywords!=''">
			<view class="flexleft margin_top xiahuaxian" v-for="item in 4" @click="tzssjg">
				<view class="margin_right2">
					<u-icon name="search" color="#333333" size="16"></u-icon>0
				</view>
				<view class="ershiba xiaolan">教育
					<text class="ershiba xiaohei">培训机构招生营销</text>
				</view>
			</view>
		</template> -->
		<!-- <template v-if="keywords=='' && ss_ls.length"> -->
			<scroll-view scroll-y="true" style="max-height: 500rpx;">
				<view class="flexbetween " :class="index==0?'':'margin_top5'" v-for="(item,index) in ss_ls" :key="index" @click="clickssls(item)">
					<view class="flexleft">
						<view class="margin_right2">
							<u-icon name="clock" color="#333333" size="16"></u-icon>
						</view>
						<view class="ershiba xiaohei">{{item}}</view>
					</view>
					<view class="" @click.stop="shanchuitem(index)">
						<u-icon name="close" color="#999" size="14"></u-icon>
					</view>
				</view>
			</scroll-view>
			<view class="flexcenter margin_top5 xiahuaxian" @click="lhshow = true">
				<view class="sanshier xiaohui">清除全部搜索记录</view>
			</view>
		<!-- </template> -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				lhshow: false,
				keywords:"",
				ss_ls: [],
			}
		},
		onLoad() {
			let list = uni.getStorageSync("searchListtj");
			this.ss_ls = JSON.parse(list);
		},
		methods: {
			clickssls(item) {
				this.keywords = item
				this.tzssjg()
			},
			shanchuitem(i){
				this.ss_ls.splice(i, 1);
				uni.setStorage({
					key: 'searchListtj',
					data: JSON.stringify(this.ss_ls)
				});
			},
			tzssjg() {
				let _this = this
				if (_this.keywords == '') {
					httpRequest.toast('请输入输入内容');
					return false
				} else {
					if (!_this.ss_ls.includes(_this.keywords)) {
						_this.ss_ls.unshift(_this.keywords);
						uni.setStorage({
							key: 'searchListtj',
							data: JSON.stringify(_this.ss_ls)
						});
					} else {
						//有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
						let i = _this.ss_ls.indexOf(_this.keywords);
						_this.ss_ls.splice(i, 1);
						_this.ss_ls.unshift(_this.keywords);
						uni.setStorage({
							key: 'searchListtj',
							data: JSON.stringify(_this.ss_ls)
						});
					}
				}
				uni.navigateTo({
					url: '/pages_homepage/sousuotjjg?text=' + _this.keywords
				})
				// _this.keywords = ""
			},
			empty() {
				httpRequest.toast('已清空');
				uni.removeStorage({
					key: 'searchListtj'
				});
			
				this.ss_ls = [];
			},
			lhclose() {
				this.lhshow = false
			},
			jumper(url) {
				uni.navigateTo({
					url: url
				})
			},
			//
			tzsgjg() {
				uni.navigateBack(1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ssousuobox1 {
		background-color: #f6f6f6;
		width: 100%;
		border-radius: 36rpx;
		padding: 10rpx 30rpx;
	}
	
</style>